<template>
  <div class="radioCollection">
    <v-header title="视频汇" :fixed="true" ref="headerHeight"></v-header>
    <scroll
      ref="scroll"
      :style="{paddingTop: paddingTop + 'px'}">


      <div v-if="scenicfacilitiesList != ''" v-for="item in scenicfacilitiesList" :key="item.id" class="radioModular">
        <img class="facilities-img" v-lazy="item.thumbUrl"/>
        <img @click="playVideo(item)" class="play-icon" :src="playImg">
      </div>

      <not-data v-if="scenicfacilitiesList == ''"></not-data>

      <div :style="{height: height + 'px'}"></div>
    </scroll>
  </div>
</template>

<script type='text/ecmascript-6'>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import { isIphoneX } from '@/assets/js/brower'
import myTop from '@/assets/img/myhome/my_top.png'
import { Grid, GridItem } from 'vux'
import playImg from '@/assets/img/play.png'
import axios from '@/api/axiosApi'

import notData from '@/components/not-data/not-data.vue'

export default {
  data () {
    return {
      playImg,
      paddingTop: 0,
      height: 0,
      myTop,
      scenicfacilitiesList: [],
      type: this.$route.params.type
    }
  },
  components: {
    VHeader,
    Scroll,
    Grid,
    GridItem,
    notData
  },
  created () {
    if (isIphoneX()) {
      this.paddingTop = 74
      this.height = 120
    } else {
      this.paddingTop = 60
      this.height = 100
    }
    this._getVideoList()
  },
  methods: {
    // 获取视频数据
    _getVideoList () {
      if (this.$route.params.type === '0') {
        axios.get(this, '/v1/scenicFacilities', {}, (data) => {
          this.scenicfacilitiesList = data
        })
      } else {
        axios.get(this, `/v1/scenicFacilities?areaId=${this.$route.query.areaId}`, {}, (data) => {
          this.scenicfacilitiesList = data
        })
      }
    },
    playVideo(facilities) {
      this.$router.push({
        path: `/home/homeContentManagement/${facilities.publicityId}`,
        query: {
          title: facilities.name
        }
      })
    }
  },
  mounted () {
    this.$refs.scroll.$el.style.height = (window.innerHeight - this.paddingTop) + 'px'
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable'
  .radioCollection {
    position fixed 
    top 0
    right 0
    bottom 0
    left 0
    z-index 500
    background #ffffff
    padding 0 15px
    .radioModular {
      box-shadow 0 1px 6px rgba(0,0,0,0.2) 
      border 1px solid rgba(0,0,0,0.2)
      margin-top 20px
      width 100%
      height 80%
      position relative
    }
    .facilities-img {
      width 100%
      height 100%
    }
    .play-icon {
      width 64px
      height 64px
      position absolute
      left: 50%
      top: 65px
      transform: translateX(-50%)
    }
  }
</style>

<style lang='stylus' rel='stylesheet/stylus'>
</style>
